<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <base th:href="@{/}">
  <meta charset="UTF-8" />
  <title>尚硅谷会员注册页面</title>
  <link type="text/css" rel="stylesheet" href="static/css/style.css" />
  <link rel="stylesheet" href="static/css/register.css" />
  <style type="text/css">
    .login_form {
      height: 420px;
      margin-top: 25px;
    }
  </style>
  <script src="static/script/vue.js"></script>
  <script src="static/script/axios.min.js"></script>
</head>
<body>
<div id="app">
  <div id="login_header">
    <a href="index.html">
      <img class="logo_img" alt="" src="static/img/logo.gif" />
    </a>
  </div>

  <div class="login_banner">
    <div class="register_form">
      <h1>注册尚硅谷会员</h1>
      <form action="user?flag=regist" @submit="checkRegist" method="post">
        <div class="form-item">
          <div>
            <label>用户名称:</label>
            <input type="text" placeholder="请输入用户名" v-model="username" name="username" @change="usernamechange"/>
          </div>
          <span class="errMess" :style="usernameStyle">{{usernameErrMsg}}</span>
        </div>
        <div class="form-item">
          <div>
            <label>用户密码:</label>
            <input type="password" placeholder="请输入密码" v-model="password" name="password"/>
          </div>
          <span class="errMess" :style="passwordStyle">{{passwordErrMsg}}</span>
        </div>
        <div class="form-item">
          <div>
            <label>确认密码:</label>
            <input type="password" placeholder="请输入确认密码" v-model="confirmPassWord"/>
          </div>
          <span class="errMess" :style="confirmPassWordStyle">{{confirmPassWordErrMsg}}</span>
        </div>
        <div class="form-item">
          <div>
            <label>用户邮箱:</label>
            <input type="text" placeholder="请输入邮箱" v-model="email" name="email"/>
          </div>
          <span class="errMess" :style="emailStyle">{{emialErrMsg}}</span>
        </div>
        <div class="form-item">
          <div>
            <label>验证码:</label>
            <div class="verify">
              <input type="text" placeholder="" name="code" v-model="code"/>
              <img :src="codeServlet" alt="" width="150px" @click="changeCode"/>
            </div>
          </div>
          <span class="errMess" :style="codeStyle">{{codeErrMsg}}</span>
        </div>
        <button class="btn">注册</button>
      </form>
    </div>
  </div>
  <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
  </div>
</div>
<script>
  new Vue({
    "el":"#app",
    "data":{
      "username":"[[${param.username}]]",
      "usernameErrMsg":"用户名应为6~16位数字和字母组成",
      "usernameStyle":{"visibility": "hidden"},
      "password":"[[${param.password}]]",
      "passwordErrMsg":"密码的长度至少为8位",
      "passwordStyle":{"visibility": "hidden"},
      "confirmPassWord":"[[${param.password}]]",
      "confirmPassWordErrMsg":"密码两次输入不一致",
      "confirmPassWordStyle":{"visibility": "hidden"},
      "email":"[[${param.email}]]",
      "emialErrMsg":"请输入正确的邮箱格式",
      "emailStyle":{"visibility": "hidden"},
      "code":"[[${param.code}]]",
      /*"codeStyle":{"visibility": "hidden"},*/
      "codeErrMsg":"[[${errormsg}]]",
      "codeServlet":"kaptcha",
      "usernameFlag":true
    },
    "methods":{
      usernamechange(){
        //1. 验证用户名格式是否正确
        var usernameReg=/^[a-zA-Z0-9]{6,16}$/;
        this.usernameStyle={"visibility":"visible"};
        if(usernameReg.test(this.username)){
          this.usernameErrMsg="√";
          axios({
            "method":"post",
            "url":"user",
            "params":{
              "flag":"usernamepanduan",
              "username":this.username,
            }
          }).then(response =>{
            var data=response.data;
          if(data=="yes"){
            this.usernameErrMsg="√√√";
            this.usernameFlag=true;
          }else{
            this.usernameErrMsg="该用户已存在！！！";
            this.usernameFlag=false;
          }
        })
        }else{
          this.usernameErrMsg="用户名应为6~16位数字和字母组成";
          event.preventDefault();
          return;
        }
      },
      changeCode(){
        //只需要让src在访问一次kaptcha
        this.codeServlet="kaptcha?aa="+new Date();
      },
      checkRegist(){
        if(!this.usernameFlag){
          event.preventDefault();
          return;
        }
        //2. 密码
        var passwordReg=/^[a-zA-Z0-9_]{8,}$/;
        this.passwordStyle={"visibility":"visible"};
        if(passwordReg.test(this.password)){
          this.passwordErrMsg="√";
        }else{
          this.passwordErrMsg="密码的长度至少为8位";
          event.preventDefault();
          return;
        }
        //3. 确认密码
        this.confirmPassWordStyle={"visibility":"visible"};
        if(this.password==this.confirmPassWord){
          this.confirmPassWordErrMsg="√";
        }else{
          this.confirmPassWordErrMsg="密码两次输入不一致";
          event.preventDefault();
          return;
        }
        //4. emial的验证
        var emialReg=/^[a-zA-Z0-9_\.-]+@([a-zA-Z0-9-]+[\.]{1})+[a-zA-Z]+$/;
        this.emailStyle={"visibility":"visible"};
        if(emialReg.test(this.email)){
          this.emialErrMsg="√";
        }else{
          this.emialErrMsg="请输入正确的邮箱格式";
          event.preventDefault();
        }
      },


    }
  })
</script>
</body>
</html>
